{extend name="layout:base" /}

{block name="content"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <button id="btnAdd" class="layui-btn layui-btn-sm layuiadmin-btn-list" data-type="add">添加栏目</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="tableList" class="layui-table" lay-filter="tableList"></table>
            <script type="text/html" id="op">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.config({
        base: '__STATIC__/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'jquery', 'layer', 'form','treeTable', 'util'], function () {
        var $ = layui.$, treeTable = layui.treeTable,layer = layui.layer,
            form = layui.form;

        var	re = treeTable.render({
            elem: '#tableList',
            url: "{:url('getList')}",
            icon_key: 'title',
            is_checkbox: true,
            defaultExpandAll: true,
            end: function(e){form.render();},
            cols: [
                {key: 'id', title: 'ID', align: 'center',},
                {key: 'type', title: '类型', align: 'center',template: function(item){
                        if(item.type == 1){return '栏目';}
                        if(item.type == 2){return '单页';}
                        if(item.type == 3){return '链接';}
                    }
                },
                {key: 'title', title: '名称', template: function(item){
                        if(item.level == 0){
                            return '<span style="font-weight: bold;padding-left: 5px;">'+item.title+'</span>';
                        }else if(item.level == 1){
                            return '<span style="">'+item.title+'</span>';
                        }else if(item.level == 2){
                            return '<span style="color:#aaa;">'+item.title+'</span>';
                        }
                    }
                },
                {key: 'seo_title', title: 'seo_title', align: 'center',},

                {
                    title: '操作', align: 'center',
                    template: function(item){
                        return '<a lay-href={:url("edit")}?id='+item.id+'>编辑</a> | <a  lay-filter="del">删除</a>';
                    }
                }
            ]
        });

        treeTable.on('tree(edit)',function(data){
            var id=data.item['id'];
            var url = "{:url('edit')}?id="+id;
            var index = layer.open({
                type: 2,
                title: '修改',
                area: ['90%', '90%'],
                shade: 0,
                maxmin: true,
                content: url,
                zIndex: layer.zIndex
            });
        });
        treeTable.on('tree(del)',function(data){
            var id=data.item['id'];
            $.post("{:url('del')}",{id:id}, function (result) {
                if (result['code'] == 0) {
                    layer.msg(result['msg'], {icon: 1, time: 1000}, function () {
                        // parent.location.reload();
                        window.location.reload();
                    });
                } else {
                    layer.msg(result['msg'], {icon: 3, time: 3000});
                }
            });

        });

        //操作
        var $ = layui.$, active = {
            add: function () {
                var index = layer.open({
                    type: 2,
                    title: '添加栏目',
                    area: ['800px', '600px'],
                    shade: 0,
                    maxmin: true,
                    content: "{:url('add')}",
                    zIndex: layer.zIndex
                });
                // layer.full(index);
            }
        };
        $("#btnAdd").on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>
{/block}